<template>
  <div>
    <div class="flex">
      <zbStore ref="storeRef" @selStore="selStore" />
      <div class="flex1" style="width: 60%">
        <zbTable ref="tableRef" :api-fun="get_list" @action="action">
          <template #toolbar>
            <a-space>
              <a-button
                :type="item.types == 'add' ? 'primary' : 'dashed'"
                v-for="item in optBtn"
                :key="item.url"
                @click="topAction(item)"
              >
                <template #icon>
                  <plus-outlined v-if="item.types == 'add'" />
                  <clear-outlined v-else-if="item.types == 'delete'" />
                  <upload-outlined v-else-if="item.types == 'export'" />
                  <rest-outlined v-else-if="item.types == 'recycling'" />
                </template>
                <span>
                  <template v-if="item.types == 'check'">
                    <a-checkbox v-model:checked="checked" @change="change"
                      >不显示离职</a-checkbox
                    >
                  </template>
                  <template v-else>{{ item.name }}</template>
                </span>
              </a-button>
            </a-space>
          </template>
        </zbTable>
      </div>
    </div>
    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editDataId="editDataId"
      :storeCode="storeCode"
      @done="done"
    />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
    >
      <p>删除后无法恢复，请谨慎操作</p>
    </a-modal>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    RestOutlined
  } from '@ant-design/icons-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import zbStore from '@/components/zbStore/index.vue';
  import zbTable from './components/zbTable/index.vue';
  import userEdit from './components/user-edit.vue';
  import { get_list, delArr } from '@/api/user/store_teams';

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  // 编辑数据
  const editDataId = ref(null);
  // 编辑按钮数据
  const actionData = ref({});
  // 获取子组件
  const tableRef = ref(null);
  const actionStatus = ref('add');
  const storeCode = ref(null);
  const delArrShow = ref(false); //批量删除确认弹框
  const delArrData = ref([]); //批量删除的id
  const popconfirm = ref(false);
  const optBtn = ref([]);

  onMounted(() => {
    get_list({ page: 1, page_size: 10 })
      .then(async (res) => {
        optBtn.value = res.top_button;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  const topAction = (item) => {
    if (item.types == 'add') {
      if (!storeCode.value) {
        return message.error('请先选择门店');
      }
      editDataId.value = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: '/tenant/store_teams/add' };
    }
    if (item.types == 'export') {
      let data = {
        url: 'tenant/store_teams/export',
        params: {},
        filename: '门店班组列表'
      };
      daochuFn(data);
    }
  };

  const selStore = (val) => {
    storeCode.value = val.code;
    tableRef.value.changeStoreCode(val.code);
    tableRef.value.reload();
  };
  //单个删除
  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const done = (form) => {
    console.log('done数据：', actionData.value, form);
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    popconfirm.value = false;
    tableRef.value.reload();
  };
  const daochu = () => {
    let data = {
      url: 'tenant/store_teams/export',
      params: {},
      filename: '门店班组列表'
    };
    daochuFn(data);
  };
  const action = (data) => {
    console.log('data', data);
    if (data.action_data.type == 'edit') {
      editDataId.value = data.row_data.id;
      actionData.value = data.action_data;
      showEdit.value = true;
      actionStatus.value = 'edit';
    }
    if (data.action_data.type == 'delete') {
      delArrData.value = [];
      delArrData.value.push(data.row_data.id);
      popconfirm.value = true;
    }
    if (data.action_data.type == 'add') {
      editDataId.value = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: data.row_data.url };
    }
  };
</script>
